<template>
  <div class="cs-page-container">
    <el-card class="box-card">
      <div class="cs-filter-container" style="margin-bottom: 20px">
        <el-input
          v-model.trim="listQuery.userId"
          clearable
          placeholder="用户ID"
          style="width:130px"
        />
        <el-select
          v-model="listQuery.status"
          filterable
          placeholder="状态"
        >
          <el-option label="待兑换" :value="0" />
          <el-option label="拒绝" :value="-1" />
          <el-option label="允许" :value="1" />
        </el-select>
        <el-date-picker
          v-model="daterangeValue"
          :picker-options="daterangePickerOptions"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="创建起始时间"
          end-placeholder="创建结束时间"
          value-format="yyyy/MM/dd"
          style="width:250px"
          @change="daterangeChanged"
        />
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleFilter"
        >搜索</el-button>
        <el-button
          type="info"
          size="small"
          icon="el-icon-refresh-right"
          @click="resetFilter"
        >
          重置
        </el-button>
      </div>
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 230px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户ID" prop="id">
          <template slot-scope="{ row }">
            <TooptipsCom :user-id="row.userId" />
          </template>
        </el-table-column>
        <el-table-column label="用户昵称" align="center" prop="nickName">
        </el-table-column>
        <el-table-column
          label="性别"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.gender | gender }}</span>
          </template>
        </el-table-column>
        <el-table-column label="兑换内容" align="center" prop="goodName">
        </el-table-column>
        <el-table-column label="手机号" align="center" prop="contactPhone">
        </el-table-column>
        <el-table-column label="兑换时间" align="center">
          <template slot-scope="scope">
            <span> {{ scope.row.exchangeTime | parseTime }} </span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span> {{ statusItem[scope.row.exchangeStatus] }} </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="330"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{row}">
            <el-button
              v-if="row.exchangeStatus === 0"
              type="primary"
              size="mini"
              @click="handleUpdate(row, 1)"
            >兑换</el-button>
            <el-button
              v-if="row.exchangeStatus === 0"
              type="danger"
              size="mini"
              @click="handleUpdate(row, -1)"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>
    <TablePagination
      :current-page="listQuery.pageNum"
      :limit="listQuery.pageSize"
      :total="total"
      :loading="listLoading"
      @handleSizeChange="handleSizeChange2"
      @handleCurrentChange="handleCurrentChange2"
    />
  </div>
</template>

<script>
import {
  getQueryExchange,
  xhrPostRecommend
} from '@/api/customSetting'

export default {
  name: 'PhysicalChange',
  data() {
    return {
      daterangeValue: '',
      list: null,
      total: 0,
      statusItem: { '0': '待兑换', '-1': '拒绝', '1': '允许' },
      listQuery: {
        pageNum: 1,
        pageSize: 100,
        startTime: null,
        endTime: null,
        userId: (this.$route.query && this.$route.query.id) || null
      }
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      this.listLoading = true
      getQueryExchange(this.listQuery).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleUpdate(row, type) {
      xhrPostRecommend({ 'exchangeId': row.id, 'type': type }).then(response => {
          this.$message.success(response.message)
          this.doSearch()
      }).catch(err => {
        this.$message.error(err)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
